<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 课题列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="addproject()"
                    ><router-link to="/myteam">我的课题 </router-link></el-button
                >
            </div>
            <el-table
                :data="projectData.filter((data) => !search || data.projectName.toLowerCase().includes(search.toLowerCase()))"
                :default-sort="{ prop: 'projectId', order: ' ascending' }"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="课题编号" sortable prop="projectId"> </el-table-column>
                <el-table-column label="课题名字" prop="projectName"></el-table-column>
                <el-table-column label="开始时间" sortable prop="startDate"> </el-table-column>
                <el-table-column label="结束时间" sortable prop="endDate" :formatter="endDataFormatter"></el-table-column>
                <el-table-column label="指导老师" prop="teacher.teacherName"> </el-table-column>
                <el-table-column label="小组" prop="team" :formatter="teamNameFormatter"> </el-table-column>
                <el-table-column align="center">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入组名搜索" />
                    </template>
                    <template slot-scope="scope" align="center">
                        <el-button type="text" @click="showDetails(scope.$index, scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    :page-sizes="[5, 10, 15, 20]"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    // name: 'basetable',
    data() {
        return {
            number: localStorage.getItem('ms_number'),
            projectList: [],
            projectData: [],
            query: {
                pageIndex: 1,
                pageSize: 5
            },
            pageTotal: 0
        };
    },
    created() {
        //this.$http.this.getData();
        this.$http.get('http://localhost:9900/project/allProject?number=' + this.number).then((res) => {
            console.log(res.data);
            this.projectList = res.data;
            this.pageTotal = res.data.length;
            console.log('this.projectList' + this.projectList);
            this.currentChangePage(this.projectList, 1);
        });
    },
    methods: {
        // 分页导航
        handlePageChange(currentPage) {
            this.query.pageIndex = currentPage;
            this.currentChangePage(this.projectList, currentPage);
        },
        //改变每页条数
        handleSizeChange(pageSize) {
            this.query.pageSize = pageSize;
            this.handleCurrentChange(this.query.pageIndex);
        },
        handleCurrentChange(currentPage) {
            this.query.pageIndex = currentPage;
            this.currentChangePage(this.projectList, currentPage);
        },
        //分页显示
        currentChangePage(list, currenPage) {
            let from = (currenPage - 1) * this.query.pageSize; //0
            let to = currenPage * this.query.pageSize; //5
            this.projectData = []; //[]
            for (; from < to; from++) {
                if (list[from]) {
                    this.projectData.push(list[from]);
                }
            }
        },
        //查看详情
        showDetails(index, row) {
            console.log(row);
            localStorage.setItem('projectMessage', row.projectId);
            console.log(row.projectId);
            this.$router.push('/myproject');
        },
        //结束时间
        endDataFormatter(row, column, cellValue) {
            const endTime = new Date().getTime(); //现在时间
            if (new Date(cellValue).getTime() < endTime) {
                return cellValue + '(已过期)';
            } else {
                return cellValue;
            }
        },
        // //课题展示
        projectFormatter(row, column, cellValue) {
            if (cellValue == null) {
                return '';
            } else {
                return cellValue.projectName;
            }
        },
        //小组展示
        teamNameFormatter(row, column, cellValue) {
            if (cellValue == null) {
                return '(暂无)';
            } else {
                return cellValue.teamName;
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
